<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #e_coder{
            width: 50px;
            height: 50px;
            background: url("../img/e_coder_normal.png") no-repeat;
             /*固定定位*/
             position: fixed;
             top: 50%;
             left: 0;
             cursor: pointer;
        }
        #e_app{
            position: absolute;
            left: 50px;
            top: -100px;

            display: none;
        }
    </style>
</head>
<body>
    <div id="e_coder">
        <div id = "e_app">
            <img src="../img/e_coder.jpg" alt="">
           
        </div>
    </div>

    <script>
        window.onload =function(){
            // 1、获取标签
            let e_coder = document.getElementById('e_coder');
            let e_app = document.getElementById('e_app');

            // 2、鼠标进入事件
            e_coder.addEventListener('mouseenter',()=>{//使用箭头函数时候this指向window,所以不要使用this.style  
                //1、显示图片
                e_app.style.display = 'block';
                // 2、改变背景图片
                e_coder.style.background= 'url("../img/e_coder_selected.png") no-repeat';
            })

            // 3、鼠标离开事件
            e_coder.addEventListener('mouseleave',()=>{
                //1、显示图片
                e_app.style.display = 'none';
                // 2、改变背景图片
                e_coder.style.background= 'url("../img/e_coder_normal.png") no-repeat';
            })

        }
    </script>
</body>
</html>